<template>
    <div class="box">
        <rolling></rolling>
        <div class="form-container">
            <div class="tab-container">
                <div class="tab active">牛毕学院☠不收闲人</div>
            </div>

            <van-form class="registration-form" @submit="onSubmit">
                <van-cell-group inset>
                    <van-field v-model="username" type="tel" name="username" label="手机号" placeholder="手机号" :rules="[
                        { required: true, message: '手机号不能为空' },
                        { pattern: /^1[3-9]\d{9}$/, message: '手机号格式不正确' }
                    ]" class="input-field" />

                    <van-field v-model="password" type="password" name="password" label="密码" placeholder="密码" :rules="[
                        { required: true, message: '密码不能为空' },
                        { pattern: /^[a-zA-Z0-9]{8,20}$/, message: '密码格式不正确,请填写8-20位的字母数字' }
                    ]" class="input-field" />

                    <van-field v-model="userTypeDisplay" name="userType" label="用户类型" placeholder="请选择用户类型" readonly
                        clickable @click="showUserTypePicker = true" :rules="[{ required: true, message: '请选择用户类型' }]"
                        class="input-field">
                        <template #right-icon>
                            <van-icon name="arrow-down" />
                        </template>
                    </van-field>
                    <!-- <div v-if="userTypeDisplay">当前选择:>> {{ userTypeDisplay }}</div> -->
                    <van-popup v-model:show="showUserTypePicker" position="bottom">
                        <van-picker :columns="userTypeOptions" @confirm="onUserTypeConfirm"
                            @cancel="showUserTypePicker = false" />
                    </van-popup>

                </van-cell-group>
                <van-button round block type="primary" native-type="submit" class="create-button">
                    创建用户
                </van-button>
                <div class="login-link">
                    已有帐号？<a href="#" @click="$router.push('/')">立即登录</a>
                </div>
            </van-form>
        </div>
    </div>
</template>

<script setup>
import { ref } from 'vue';
import rolling from '../components/rolling.vue';
import { useRouter } from 'vue-router';
import { showFailToast, showSuccessToast } from 'vant';
import http from '@/http/index';
import { useUserStore } from '@/stores/counter';

const activeTab = ref('personal');
const username = ref('');
const password = ref('');
const userTypeDisplay = ref(''); // 用于显示的文本
const userTypeValue = ref('');  // 用于提交的实际值
const showUserTypePicker = ref(false);

// 修改为对象数组格式
const userTypeOptions = [
    { text: '普通用户', value:0 },
    { text: '管理员', value:1 }
];

const validatePhone = () => /^1[3-9]\d{9}$/.test(username.value);
const validatePwd = () => /^[a-zA-Z0-9]{8,20}$/.test(password.value);

// 修改事件处理函数，使用对象格式
const onUserTypeConfirm = (selected) => {
    console.log(selected);
    
    userTypeDisplay.value = selected.selectedOptions[0].text; // 更新显示文本
    console.log(">><>", typeof(selected.text))
    userTypeValue.value = selected.selectedOptions[0].value;  // 更新实际值
    showUserTypePicker.value = false;
    // console.log('Selected user type:', userTypeDisplay.value);
};

const router = useRouter();
const user_store = useUserStore();

const onSubmit = () => {
    if (!validatePhone()) {
        showFailToast({ message: '手机号格式不正确，无法登录', position: 'middle' });
        return;
    }

    if (!validatePwd()) {
        showFailToast({ message: '密码格式不正确', position: 'middle' });
        return;
    }

    if (!userTypeValue.value && userTypeValue.value!=0) {
        showFailToast({ message: '请选择用户类型', position: 'middle' });
        return;
    }

    http({
        url: 'register/',
        method: 'POST',
        data: {
            username: username.value,
            password: password.value,
            user_type: userTypeValue.value
        }
    }).then(response => {
        if (response.status == 200) {
            showSuccessToast({ message: '注册成功', position: 'middle' });
            user_store.setPhone(username.value);
            router.push('/');
        }
    }).catch(error => {
        console.error(error);
        showFailToast({ message: '注册请求失败', position: 'middle' });
    });
};
</script>
<style scoped>
.box {
    background-color: #15141A;
}

.form-container {
    background-color: white;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    width: 400px;
    height: 350px;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    margin: auto;
}

.tab-container {
    display: flex;
    margin-bottom: 20px;
    justify-content: center;
}

.tab {
    padding: 10px 20px;
    cursor: pointer;
    font-size: 20px;
    border-bottom: 2px solid transparent;
}

.active {
    border-bottom: 4px solid orange;
    width: 240px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.registration-form {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.input-field {
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
}


.create-button {
    background-color: orange;
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    margin-top: 20px;
    font-size: 20px;
}

.login-link {
    text-align: center;
    margin-top: 10px;
    display: flex;
    justify-content: center;
    gap: 20px;
}

.login-link a {
    color: #007BFF;
    text-decoration: none;
}
</style>